<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择一级分类" v-model="oneCategoryId" @change="categoryTwo" :disabled="scence!=0">
          <el-option v-for="item in categoryOneList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择二级分类" v-model="twoCategoryId" @change="categoryThree" :disabled="scence!=0">
          <el-option v-for="item in categoryTwoList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择三级分类" v-model="threeCategoryId" @change="categoryInfoList"
                   :disabled="scence!=0">
          <el-option v-for="item in categoryThreeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:10px 0">
    <div v-show="scence == 0">
      <el-button type="primary" size="default" icon="Plus" :disabled="!threeCategoryId" @click="addAttr">添加属性
      </el-button>
      <el-table border style="margin: 10px 0" :data="categoryInfDateList">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
        <el-table-column label="属性名称" width="120" align="center">
          <template #="{row, $index}">
            <pre>{{ row.attrName }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="属性值名称" align="center">
          <template #="{row, $index}">
            <el-tag v-for="item in row.attrValueList" :key="item.id" style="margin-left: 10px">{{
                item.valueName
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #="{row, $index}">
            <el-button type="text" icon="Edit" @click="updateAttr(row)"></el-button>
            <el-popconfirm :title="`确定删除${row.attrName}吗？`" width="200px" icon="Delete"
                           @confirm="deleteAttr(row.id)">
              <template #reference>
                <el-button icon="Delete" type="text" style="color: red"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="scence == 1">
      <el-form :inline="true">
        <el-form-item label="属性名称" label-width="80px">
          <el-input type="text" placeholder="请您输入属性名称" v-model="attrParams.attrName"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="default" icon="Plus" :disabled="!attrParams.attrName" @click="addAttrValue">
        添加属性值
      </el-button>
      <el-button size="default" @click="cancelAttr">取消</el-button>
      <el-table border style="margin: 10px 0" :data="attrParams.attrValueList">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
        <el-table-column label="属性值" align="center">
          <template #="{row, $index}">
            <el-input v-if="row.flag"
                      size="small"
                      type="text"
                      placeholder="请输入属性值名称"
                      v-model="row.valueName"
                      :ref="(vc:any) => inputArr[$index] = vc"
                      @blur="toLook(row, $index)"></el-input>
            <div v-else
                 style="text-align: left"
                 @click="toEdit(row, $index)">{{ row.valueName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #="{row, $index}">
            <el-button type="text" icon="Delete" size="small"
                       @click="attrParams.attrValueList.splice($index, 1)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="default" :disabled="attrParams.attrValueList.length<=0" @click="saveAttrValue">
        保存
      </el-button>
      <el-button size="default" @click="cancelAttr">取消</el-button>
    </div>
  </el-card>
</template>


<script setup lang="ts">
import {onMounted, ref, reactive, nextTick, onBeforeUnmount} from "vue";
import {
  addAttrInfo,
  deleteAttrInfo,
  getAttrInfoList,
  getCategoryOne,
  getCategoryThree,
  getCategoryTwo
} from "@/api/product/attr";
import {attrListResp, attrResp, categoryResp, attrValue, attrInfoResp} from "@/api/product/attr/type.ts";
import {ElMessage} from "element-plus";

let categoryOneList = ref<any>([]);
let categoryTwoList = ref<any>([]);
let categoryThreeList = ref<any>([]);
let categoryInfDateList = ref<any>([]);

let oneCategoryId = ref<number | string>('');
let twoCategoryId = ref<number | string>('');
let threeCategoryId = ref<number | string>('');

let scence = ref<number>(0);
let inputArr = ref<any>([]);

onMounted(() => {
  categoryOne();
})

const categoryOne = async () => {
  let result: categoryResp = await getCategoryOne();
  if (result.code === 200) {
    categoryOneList.value = result.data;
  } else {
    ElMessage.error(result.message);
  }
}

const attrParams = reactive({
  attrName: '',
  attrValueList: [],
  categoryID: '',
  categoryLevel: 3,
})

const categoryTwo = async () => {
  let result: categoryResp = await getCategoryTwo(oneCategoryId.value);
  if (result.code === 200) {
    twoCategoryId.value = '';
    categoryTwoList.value = [];
    categoryTwoList.value = result.data;
    threeCategoryId.value = '';
    categoryThreeList.value = [];
    categoryInfDateList.value = [];
  } else {
    ElMessage.error(result.message);
  }
}

const categoryThree = async () => {
  let result: categoryResp = await getCategoryThree(twoCategoryId.value);
  if (result.code === 200) {
    threeCategoryId.value = '';
    categoryThreeList.value = [];
    categoryThreeList.value = result.data;
    categoryInfDateList.value = [];
  } else {
    ElMessage.error(result.message);
  }
}

const categoryInfoList = async () => {
  let result: attrListResp = await getAttrInfoList(oneCategoryId.value, twoCategoryId.value, threeCategoryId.value)
  if (result.code === 200) {
    categoryInfDateList.value = [];
    categoryInfDateList.value = result.data;
  } else {
    ElMessage.error(result.message);
  }
}

const addAttr = () => {
  Object.assign(attrParams, {
    attrName: '',
    attrValueList: [],
    categoryID: '',
    categoryLevel: 3,
  })
  scence.value = 1;
  attrParams.categoryID = threeCategoryId.value;
}

const updateAttr = (row: attrInfoResp) => {
  scence.value = 1;
  Object.assign(attrParams, JSON.parse(JSON.stringify(row)))
}

const addAttrValue = () => {
  attrParams.attrValueList.push({
    valueName: '',
    flag: true,
  })
}

const saveAttrValue = async () => {
  let result: attrResp = await addAttrInfo(attrParams);
  if (result.code === 200) {
    ElMessage.success(result.message);
    scence.value = 0;
    await categoryInfoList();
  } else {
    ElMessage.error(result.message);
  }
}

const cancelAttr = () => {
  scence.value = 0;
}


const deleteAttr = async (id: number) => {
  let result: attrResp = await deleteAttrInfo(id);
  if (result.code === 200) {
    ElMessage.success(result.message);
    await categoryInfoList();
  } else {
    ElMessage.error(result.message);
  }
}

const toLook = (row: attrValue, index: number) => {
  if (row.valueName.trim() === '') {
    attrParams.attrValueList.splice(index, 1);
    ElMessage.error('属性值不能为空');
    return;
  }

  let repeat = attrParams.attrValueList.find((item) => {
    if (item != row) {
      return item.valueName.trim() === row.valueName.trim();
    }
  })

  if (repeat) {
    ElMessage.error('属性值不能重复');
    return;
  }

  row.flag = false;
}

const toEdit = (row: attrValue, $index: number) => {
  row.flag = true;
  nextTick(() => {
    inputArr.value[$index].focus();
  })
}

onBeforeUnmount(() => {
  oneCategoryId.value = '';
  twoCategoryId.value = '';
  threeCategoryId.value = '';
})


</script>


<style scoped>

</style>